<template>
  <view class="full">
    <navigator class="log-pwd" url="/pages/login/loginPassword/loginPassword"> 密码登录 </navigator>
    <text class="tip">未注册的手机号验证通过后将自动注册</text>

    <input class="phone" type="number" v-model="phone" placeholder="请输入手机号" placeholder-style="color: #888;" />
    <view class="pwd-box">
      <input class="pwd" type="text" v-model="code" placeholder="请输入验证码" placeholder-style="color: #888;" />
      <!-- <uv-code class="obtain" :seconds="60" ref="uCodeRef" change-text="(X) 秒重新发送" @change="codeChange"></uv-code>
      <uv-button class="obtain" @tap="getCode">{{ tips }}</uv-button> -->
      <up-code class="" ref="uCodeRef" change-text="(X) 秒重新发送" @change="codeChange"></up-code>
      <button class="code-btn" @tap="getCode">{{ tips }}</button>
    </view>
    <!-- <up-code class="obtain" ref="uCodeRef" change-text="(X) 秒重新发送" @change="codeChange"></up-code>
    <button class="obtain" @tap="getCode">{{ tips }}</button> -->
    <button class="login-btn" @click="submit">登录</button>
  </view>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getCodeAPI } from '@/services/login'
  import { showToast } from '@/utils/tools'
  //   import { useCounterStore } from '@/stores/counter.js'
  //   import { showToast } from '@/utils/tools.js'

  // const store = useCounterStore() // pinia
  const openId = ref('')
  const phone = ref('') //手机号
  const code = ref('') //验证码
  const uCodeRef = ref<UniCodeRef>() // 倒计时组件
  const tips = ref('') // 倒计时秒数

  onLoad(async () => {
    // openId.value = await store.getOpenId()
  })

  // 验证码倒计时
  function codeChange(text: string) {
    tips.value = text
  }

  // 获取验证码
  async function getCode() {
    if (!uCodeRef.value?.canGetCode) return
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (reg.test(phone.value)) {
      uCodeRef.value.start()

      const res = await getCodeAPI({ type: '1', phone: phone.value })
      if (res.code == 200) {
        showToast(res.msg)
      }
    } else {
      showToast('请输入正确的手机号')
    }
  }

  /**
   * 验证码登录
   * @param {type}
   * */
  async function submit() {
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (reg.test(phone.value)) {
      if (code.value !== '') {
        let loginInfo = {
          loginSource: 'login_client_phonecode', // 登录方式
          phone: phone.value,
          code: code.value,
          newMiniProgramOpenid: openId.value
        }
        uni.showLoading({
          title: '登录中...'
        })
        // await store.login(loginInfo)
        // store.getDistribution()
      } else {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
      }
    } else {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      })
    }
  }
</script>

<style lang="scss" scoped>
  .full {
    height: 100%;
    padding: 0 55rpx;
    overflow: hidden;

    .log-pwd {
      float: right;
      margin-top: 30rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #ff8a23;
    }

    .tip {
      display: block;
      margin-top: 114rpx;
      margin-left: 28rpx;
      color: #cccccc;
      font-size: 24rpx;
      font-weight: 400;
    }

    .phone {
      height: 70rpx;
      margin-top: 20rpx;
      padding-left: 27rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #000;
      border-radius: 40rpx;
      border: 1rpx solid #d8d8d8;
    }

    .pwd-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70rpx;
      margin-top: 30rpx;
      padding-left: 27rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #000;
      border-radius: 40rpx;
      border: 1rpx solid #d8d8d8;

      .pwd {
        flex: 1;
      }

      .code-btn {
        height: 26rpx;
        padding-left: 14rpx;
        padding-right: 28rpx;
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
        line-height: 26rpx;
        border-left: 1rpx solid #cccccc;
        border-radius: 0;
        background-color: #fff;
      }
    }

    .login-btn {
      width: 640rpx;
      height: 80rpx;
      margin-top: 80rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 76rpx;
      background: #df3030;
      border-radius: 40rpx;
    }
  }
</style>
